<template>
    <div>
          <el-container>
            <el-header>采购主表管理</el-header>
            <el-container>
                <el-aside style="border: 5px solid #eee">
                    <el-menu>
                       
                        <el-submenu index="1">
                            <!-- 子菜单命名 -->
                             <template slot="title">
                                <span>基本信息管理</span>
                            </template>

                            <!-- 子菜单选项 -->
                            <el-menu-item-group>
                                <router-link to="/cus">
                                   <el-menu-item index="1-1">客户管理</el-menu-item>
                                </router-link>
                                <router-link to="/goods">
                                   <el-menu-item index="1-2">商品管理</el-menu-item>
                                </router-link>
                                <router-link to="/emp">
                                    <el-menu-item index="1-3">员工管理</el-menu-item>
                                </router-link> 
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <!-- 子菜单命名 -->
                             <template slot="title">
                                <span>采购信息管理</span>
                            </template>
                            
                            <!-- 子菜单选项 -->
                            <el-menu-item-group>
                                <router-link to="/mainBuy">
                                    <el-menu-item index="2-1">采购主表管理</el-menu-item>
                                </router-link>
                                <router-link to="/payDetail">
                                    <el-menu-item index="2-2">采购明细管理</el-menu-item>
                                </router-link>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <el-button type="primary" round @click="dialogVisible1 = true">查询信息</el-button>
                    <el-dialog
                    title="查询采购时间"
                    :visible.sync="dialogVisible1"
                    width="20%"
                    >
                        <el-form>
                        <el-form-item label="请输入采购清单">
                            <el-input v-model="askPay.pid"></el-input>
                        </el-form-item>
                        </el-form>

                        <span slot="footer" >
                        <el-button @click="dialogVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible1 = false,select(askPay.pid)">确 定</el-button>
                        </span>
                    </el-dialog>

                    <el-dialog
                    title="查询员工结果"
                    :visible.sync="selectRes"

                    width="75%"
                    >
                        <!-- <el-form>

                        <el-form-item label="采购清单:">
                            {{askPay.pid}}
                        </el-form-item>
                        <el-form-item label="员工编号:">
                            {{askPay.eid}}
                        </el-form-item>
                        <el-form-item label="采购数量:">
                            {{askPay.pcount}}
                        </el-form-item>
                        <el-form-item label="采购总价:">
                            {{askPay.ptotal}}
                        </el-form-item>
                        <el-form-item label="采购时间:">
                            {{askPay.pdate}}
                        </el-form-item>
                        <el-form-item label="备注:">
                            {{askPay.other}}
                        </el-form-item>
                        </el-form> -->
                         <el-table v-bind:data="tmptb" border stripe style="width: 100%">
                      <el-table-column prop="pid" label="采购清单" width="150" ></el-table-column>
                      <el-table-column prop="eid" label="员工编号" width="150" ></el-table-column>
                      <el-table-column prop="pcount" label="采购数量" width="150" ></el-table-column>
                      <el-table-column prop="ptotal" label="采购总价" width="150"></el-table-column>
                      <el-table-column prop="pdate" label="采购时间" width="150" ></el-table-column>
                      <el-table-column prop="other" label="备注" width="150" ></el-table-column>
                    </el-table>
                    <el-button @click="selectRes = false">退出</el-button>
                    
                </el-dialog>





                    <el-button type="primary" round @click="dialogVisible2=true">删除信息</el-button>
                    <el-dialog
                        title="删除采购主表数据"
                        :visible.sync="dialogVisible2"
                        width="20%"
                        >
                        <el-form>
                        <el-form-item label="请输入采购清单">
                            <el-input v-model="rmPay.pid"></el-input>
                        </el-form-item>
                        </el-form>

                        <span slot="footer" >
                        <el-button @click="dialogVisible2 = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible2 = false,remove()">确 定</el-button>
                        </span>
                    </el-dialog>



                    <el-button type="primary" round @click="dialogVisible3 = true">修改信息</el-button>
                    <el-dialog
                    title="修改采购主表信息"
                    :visible.sync="dialogVisible3"
                    width="20%"
                    >
                        <el-form>
                            <el-form-item label="请输入采购清单">
                            <el-input v-model="updatePay.pid"></el-input>
                            </el-form-item>
                        </el-form>
                        
                        <span slot="footer" >
                            <el-button @click="dialogVisible3 = false">取 消</el-button>
                            <el-button type="primary" @click="updateVisible = true,select1(updatePay.pid)">确 定</el-button>

                        <el-dialog
                        :visible.sync="updateVisible"
                        title='修改采购主表信息'
                        width="25%"
                        >
                            
                            <el-form>
                                <!-- <el-form-item label="输入修改后的采购清单">
                                <el-input v-model="updatePay.pid"></el-input>
                                </el-form-item>
                             -->

                           
                                <el-form-item label="输入修改后的员工编号">
                                <el-input v-model="updatePay.pid"></el-input>
                                </el-form-item>
                            
                          
                                <el-form-item label="输入修改后的采购数量">
                                <el-input v-model="updatePay.pcount"></el-input>
                                </el-form-item>
                           
                            
                                <el-form-item label="输入修改后的采购总价">
                                <el-input v-model="updatePay.ptotal"></el-input>
                                </el-form-item>
                            

                           
                                <el-form-item label="输入修改后的采购时间">
                                <el-input v-model="updatePay.pdate"></el-input>
                                </el-form-item>
                            

                            
                                <el-form-item label="输入修改后的采购备注">
                                <el-input v-model="updatePay.other"></el-input>
                                </el-form-item>
                            </el-form>

                            <span slot="footer" >
                            <el-button @click="updateVisible = false,dialogVisible3 = false">取 消</el-button>
                            <el-button type="primary" @click="updateVisible = false,dialogVisible3 = false,update()">确 定</el-button>
                            </span>
                        </el-dialog>
                        </span>
                    </el-dialog>



                    <el-button type="primary" round @click="dialogVisible4=true">添加信息</el-button>

                <el-dialog
                title="添加员工"
                :visible.sync="dialogVisible4"
                width="20%"
                >
                    <el-form>
                    <el-form-item label="请输入采购清单">
                        <span style="color:red">此为必填项</span>
                        <el-input v-model="addPay.pid"></el-input>
                    </el-form-item>
                    <el-form-item label="请输入员工编号">
                        <span style="color:red">此为必填项</span>
                        <el-input v-model="addPay.eid"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="请输入员采购数量">
                        <span style="color:red">此为必填项</span>
                        <el-input v-model="addPay.pcount"></el-input>
                    </el-form-item> -->
                    <!-- <el-form-item label="请输入采购总价">
                        <span style="color:red">此为必填项</span>
                        <el-input v-model="addPay.ptotal"></el-input>
                    </el-form-item> -->
                    <el-form-item label="请输入采购时间">
                        <span style="color:red">此为必填项</span>
                        <el-input v-model="addPay.pdate"></el-input>
                    </el-form-item>
                    <el-form-item label="请输入采购的备注">
                        <el-input v-model="addPay.other"></el-input>
                    </el-form-item>
                    </el-form>
                    
                    <span slot="footer" >
                    <el-button @click="dialogVisible4 = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible4 = false,add()">确 定</el-button>
                    </span>
                </el-dialog>


                    <el-button type="primary" round @click="csv()">导出表格</el-button>

                    <el-table v-bind:data="payData" border stripe style="width: 100%">
                      <el-table-column prop="pid" label="采购清单" width="150" ></el-table-column>
                      <el-table-column prop="eid" label="员工编号" width="150" ></el-table-column>
                      <el-table-column prop="pcount" label="采购数量" width="150" ></el-table-column>
                      <el-table-column prop="ptotal" label="采购总价" width="150"></el-table-column>
                      <el-table-column prop="pdate" label="采购时间" width="150" ></el-table-column>
                      <el-table-column prop="other" label="备注" width="150" ></el-table-column>
                    </el-table>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data: function(){
        return {
            askPay: {
                pid:'',
                eid:'',
                pcount:'',
                ptotal:'',
                pdate:'',
                other:'',
        }, 
        addPay: {
            pid:'',
            eid:'',
            pcount:'',
            ptotal:'',
            pdate:'',
            other:'',
        },
        updatePay: {
            pid:'',
            eid:'',
            pcount:'',
            ptotal:'',
            pdate:'',
            other:'',
        }, 
        rmPay: {
            pid:'',
            eid:'',
            pcount:'',
            ptotal:'',
            pdate:'',
            other:'',
        },
            payData:[/* {
                pid:'',
                eid:'',
                pcount:'',
                ptotal:'',
                pdate:'',
                other:'',
            } */],
            dialogVisible1: false,
            dialogVisible2: false,
            dialogVisible3: false,
            dialogVisible4: false,
            updateVisible: false,
            editVisible1: false,
            editVisible2: false,
            editVisible3: false,
            editVisible4: false,
            editVisible5: false,
            editVisible6: false,
            selectRes: false,
            tmptb: []
        }
    },methods: {
    //展示所有数据
        selectAll() {
        var that = this;
        axios.get("/TbPayMainSelectAll").then(function (result) {
            if (result.data.code == 1) {
            that.payData = result.data.data; //result.data获取统一的json对象
            //result.data.data获取json对象中的属性data值
            } else {
            alert(result.data.msg);
            }
        });
        },
        //查
        select(Pid) {
        var that = this;
        axios({
                method: "get",
                url: "/TbPayMainSelectByPid/"+Pid,
            }).then(result => {
            if(result.data.code==1){
                alert("查询成功");
                that.askPay = result.data.data;
                that.tmptb[0]=that.askPay;
                this.selectRes = true;
                
            }else{
                that.$message.error(result.data.msg);
            }
            })
        },
        select1(Pid) {
        var that = this;
        axios({
                method: "get",
                url: "/TbPayMainSelectByPid/"+Pid,
            }).then(result => {
            if(result.data.code==1){
                alert("查询成功");
                that.updatePay = result.data.data;
                this.updateVisible = true;
            }else{
                that.$message.error(result.data.msg);
            }
            })
        },
        //增加
        add() {
        var that = this;
        axios.post("/TbPayMainInsert",this.addPay).then(function (result) {
            if (result.data.code==1){
                that.$message.success(result.data.msg);
                //关闭对话框
                that.dialogVisible4=false;
                //重新加载表格数据
                that.selectAll();
            }else {
                that.$message.error(result.data.msg);
            }
        });
        /* axios({
                method: "post",
                url: "/TbEmployeeInsert",
                params: this.addEmp
            }).then(result => {
            if (result.data.code==1){
                that.$message.success(result.data.msg);
                //关闭对话框
                that.dialogVisible4=false;
                //重新加载表格数据
                that.selectAll();
            }else {
                that.$message.error(result.data.msg);
            }
            }) */
        },
        //删除
        remove() {
        //提示框
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                //通过axios调用我们的删除接口
                var that = this;
                axios.delete("/TbPayMainDelete/"+ that.rmPay.pid).then(function (result){
                    if (result.data.code==1){
                        //1.弹出一个信息
                        that.$message.success(result.data.msg);
                        //2.重新加载表格数据
                        that.selectAll();
                    }else {
                        //弹出一个信息
                        that.$message.error(result.data.msg)
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        update(){
        var that = this;
        // this.updateEmp = this.select(this.updateEmp.eid);
        axios.post("/TbPayMainUpdate", this.updatePay).then(function (result) {
            if (result.data.code == 1) {
                that.$message.success(result.data.msg);
                //关闭对话框
                that.Visible = false;
                //重新加载表格数据
                that.selectAll();
            } else {
                that.$message.error(result.data.msg);
            }
        })
        },csv(){
        /*axios.get("/TbEmployeeExport") .then(function () {
            if (result.data.code == 1) {
                that.$message.success(result.data.msg);
                //关闭对话框
                that.Visible = false;
                //重新加载表格数据
                that.selectAll();
            } else {
                that.$message.error(result.data.msg);
            }
        }) */
        window.location.href = 'http://localhost:8083/TbPayMainExport'


        window.open('http://localhost:8083/TbPayMainExport', '_self'); // _self参数设置是为了不跳转到新界面上去
        let link = document.createElement('a')
            link.href = 'http://localhost:8083/TbPayMainExport'
            link.download = '下载文件名册'
            link.click()
        }
    },
    mounted() {
        axios.get('/TbPayMainSelectAll').then((result) => {
            this.payData=result.data.data;
        });
    },
    created() {
     this.selectAll();
    },
}
</script>


<style>
    .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>